import React, { Component } from 'react'
import { connect } from 'react-redux'
import {incremnet,inreast,inchaun,getjsondate} from '../actions/counter'
import {counterCreator} from '../actions'
export class Home extends Component {
    constructor(props){
        super(props)
        this.state={

        }
    }
    componentDidMount(){

    }
    add=()=>{
        this.props.incremnet()
    }
    rester=()=>{
        this.props.inreast()
    }
    go=(n)=>{
        this.props.inchaun(n)
    }
    getjson=()=>{
        this.props.getjsondate()
    }
    render() {
        const {$$num,$$data} = this.props
        return (
            <div>
                <button onClick={this.rester}>减</button>
                {$$num}
                <button onClick={this.add}>加</button>
                <button onClick={()=>this.go(20)}>点我传参</button>
                <button onClick={this.getjson}>点击获取ajax数据</button>
                <div>
                {
                    $$data.map((item)=>{
                        return(
                            <dl key={item.id}>
                                <dt>{item.img}</dt>
                                <dl>{item.name}</dl>
                            </dl>
                        )
                    })
                }
                </div>
                
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return{
        $$num:state.counter.num,
        $$data:state.counter.data
    }
}

const mapDispatchToProps =(dispatch)=>( {
    incremnet:()=>dispatch(counterCreator.incremnet()),
    inreast:()=>dispatch(counterCreator.inreast()),
    inchaun:(n)=>dispatch(counterCreator.inchaun(n)),
    getjsondate:()=>dispatch(counterCreator.getjsondate())
})

export default connect(mapStateToProps, mapDispatchToProps)(Home)
